var maxHeight = 400;
$(function(){
    $(".dropdown > li").hover(function() {
        var $container = $(this),
            $list = $container.find("ul"),
            $anchor = $container.find("a"),
            height = $list.height(),       // make sure there is enough room at the bottom
            multiplier = height / maxHeight;     // needs to move faster if list is taller
        // need to save height here so it can revert on mouseout
        $container.data("origHeight", $container.height());
        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");
        // make sure dropdown appears directly below parent list item
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });
        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }
    }, function() {
        var $el = $(this);
        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");
    });
});

window.onload = function(){
    autoMobile();
    $(window).resize(function () {
        autoMobile();
    });
};

function autoMobile(){
    if($(window).width() <= 320){
        $('#carousel-example-generic2').attr("style", "height: 175px !important");
        $('#carousel-example-generic2 .item').attr("style", "height: 175px !important");
        $('#carousel-example-generic2 .carousel-inner > .item > img').attr("style", "height: 175px !important");
    }
    else{
        $('#carousel-example-generic2').attr("style", "height: 450px !important");
        $('#carousel-example-generic2 .item').attr("style", "height: 450px !important");
        $('#carousel-example-generic2 .carousel-inner > .item > img').attr("style", "height: 450px !important");
    }

    if($(window).width() < 768){
        $('.div-mobile').removeClass('text-center');
        $('.div-support').css("fontSize", "12px");
        $('.div-name').css("fontSize", "14px");
        $('.div-support').addClass('text-center');
        $('.div-mobile').css("fontSize", "12px");
        $('.div-product-responsive > div').addClass('text-center');
        $('.div-product-responsive > div').removeClass('div-product');
        $('.container-fluid').attr('style', 'padding: 0 !important');
        $('nav .container-fluid').attr('style', 'padding: 0 !important');
        $('.div-name').css("padding", "0");
        $('.div-support').css("padding", "10px 0 0 0");
        $('.div-product-category').css("border", "none");
        $('.div-detail').css("text-align", "left");
        $('.div-detail').css("padding", "20px 0 0 30px");
        $('.div-mobile').css("margin-bottom", "10px");

        $('#div-product-1').hover(function(){
            $('#div-product-1').removeClass('col-xs-12');
            $('#div-product-1').css("width", "50%");
        }, function(){
            $('#div-product-1').css("width", "100%");
        });
    }

    if($(window).width() >= 768){
        $('.div-mobile').addClass('text-center');
        $('.div-support').css("fontSize", "12px");
        $('.div-name').css("fontSize", "28px");
        $('.div-mobile').css("fontSize", "14px");
        $('.div-product').css("width", "20%");
        $('.div-product').css("float", "left");
        $('.div-name').css("padding", "61px 0 59px 0");
        $('.div-support').css("padding", "75px 10px 74px 10px");
        $('.div-support').removeClass('text-center');
        $('.container-fluid').attr('style', 'padding: 0 85px 0 85px !important');
        $('nav .container-fluid').attr('style', 'padding: 0 85px 0 85px !important');
        $('ul.dropdown li').css("width", "125px");
        $('.div-product-responsive > div').removeClass('col-xs-12');
        $('.div-product-responsive > div').removeClass('text-center');
        $('.div-product-responsive > div').addClass('div-product');
        $('.div-product-category').css("border-top", "3px solid #FEC8AC");
        $('.div-detail').css("padding", "0");
        $('.div-mobile').css("margin-bottom", "0");
    }

    if($(window).width() >= 992){
        $('.div-mobile').addClass('text-center');
        $('.div-support').css("fontSize", "14px");
        $('.div-name').css("fontSize", "30px");
        $('.div-mobile').css("fontSize", "14px");
        $('.div-product').css("width", "20%");
        $('.div-product').css("float", "left");
        $('.div-name').css("padding", "58px 0 57px 0");
        $('.div-support').css("padding", "80px 10px 79px 10px");
        $('.div-support').removeClass('text-center');
        $('.container-fluid').attr('style', 'padding: 0 85px 0 85px !important');
    }

    if( $(window).width() >= 962 && $(window).width() <= 991){
        $('ul.dropdown li').css("width", "100px");
        $('ul.dropdown li:nth-child(6)').css("width", "105px");
        $('ul.dropdown li:nth-child(7)').css("width", "120px");
        $('ul.dropdown li:nth-child(8)').css("width", "85px");
        $('nav .container-fluid').attr('style', 'padding: 0 75px 0 75px !important');
    }

    if( ($(window).width() >= 992 && $(window).width() <= 1176)){
        $('ul.dropdown li').css("width", "100px");
        $('ul.dropdown li:nth-child(6)').css("width", "120px");
        $('ul.dropdown li:nth-child(7)').css("width", "115px");
        $('ul.dropdown li:nth-child(8)').css("width", "85px");
    }

    if( $(window).width() >= 1200){
        $('.div-mobile').addClass('text-center');
        $('.div-support').css("fontSize", "16px");
        $('.div-name').css("fontSize", "32px");
        $('.div-mobile').css("fontSize", "14px");
        $('.div-product').css("width", "20%");
        $('.div-product').css("float", "left");
        $('.div-name').css("padding", "78px 0 77px 0");
        $('.div-support').css("padding", "78px 10px 78px 10px");
        $('.div-support').removeClass('text-center');
        $('.container-fluid').attr('style', 'padding: 0 85px 0 85px !important');
        $('nav .container-fluid').attr('style', 'padding: 0 171px 0 171px !important');
        $('ul.dropdown li').css("width", "126px");
        $('ul.dropdown li:last-child').css("width", "125px");
    }

    if( $(window).width() >= 1200 && $(window).width() <= 1348){
        $('ul.dropdown li').css("width", "100px");
        $('ul.dropdown li:nth-child(6)').css("width", "120px");
        $('ul.dropdown li:nth-child(7)').css("width", "120px");
        $('ul.dropdown li:nth-child(8)').css("width", "115px");
    }

    if( $(window).width() == 1024){
        $('ul.dropdown li').css("width", "110px");
        $('ul.dropdown li:nth-child(6)').css("width", "110px");
        $('ul.dropdown li:nth-child(7)').css("width", "115px");
        $('ul.dropdown li:nth-child(8)').css("width", "109px");
        $('nav .container-fluid').attr('style', 'padding: 0 70px 0 70px !important');
    }

}

$(document).ready(function(){
    $("#div-product-1").hover(function(){
        $('.hover-1').hide();
        $('.hover-2').show();
    },function(){
        $('.hover-1').show();
        $('.hover-2').hide();
    });

    $("#div-product-1").click(function(){
        window.location.href = "#";
    });

    $("#div-banner1").hover(function(){
        bannerImageEffectHover(this.id, 0);
    },function(){
        bannerImageEffectHover(this.id, 1);
    });

    $("#div-banner2").hover(function(){
        bannerImageEffectHover(this.id, 0);
    },function(){
        bannerImageEffectHover(this.id, 1);
    });

    $("#div-banner3").hover(function(){
        bannerImageEffectHover(this.id, 0);
    },function(){
        bannerImageEffectHover(this.id, 1);
    });

    $("#banner1").hover(function(){
        bannerTextEffectHover(this.id, 0);
    },function(){
        bannerTextEffectHover(this.id, 1);
    });

    $("#banner2").hover(function(){
        bannerTextEffectHover(this.id, 0);
    },function(){
        bannerTextEffectHover(this.id, 1);
    });

    $("#banner3").hover(function(){
        bannerTextEffectHover(this.id, 0);
    },function(){
        bannerTextEffectHover(this.id, 1);
    });

    $('#carousel-example-generic2').on('slide.bs.carousel', function () {
        $("#carousel-example-generic2 > .carousel-inner > .active").addClass("animated flip");
    });
});

function bannerTextEffectHover(id, isOut){
    if(isOut == 0){
        $("#"+id).css("color", "yellow");
    }
    else{
        $("#"+id).css("color", "white");
    }
}

function bannerImageEffectHover(id, isOut){
    if(isOut == 0){
        $("#"+id+" .content img").css("opacity", "0.8");
    }
    else{
        $("#"+id+" .content img").css("opacity", "1");
    }
}

